<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>计算器</title>
    <style type="text/css">
        body {
            font-size:12px;
            font-family:Arial, Georgia, "Times New Roman", Times, serif;
            color: #0c0c0c;
            text-align:center;
            background-color: rgba(228, 228, 228, 0.99);
        }
        h6{
            margin:0;
            font-size:12px;
        }
        #calculator {
            width:240px;
            height:auto;
            overflow:hidden;
            margin:10px auto;
            border: #3dc0ff 1px solid;
            padding-bottom:10px;
            background-color: #c1aef2;
        }
        #calculator div {
            clear:both;
        }
        #calculator ul{
            padding:0;
            margin:5px 14px;
            border: #15fc19 1px solid;
            height:auto;
            overflow:hidden
        }
        #calculator li{
            list-style:none;
            float:left;
            width:32px;
            height:32px;
            margin:5px;
            display:inline;
            line-height:32px;
            font-size:14px;
            background-color: #ea41e0;
        }
        #calculator li.tool{
            background-color: #d23bc9;
        }
        #calculator li:hover{
            background-color: #f9f212;
            cursor:pointer;
        }
        #calculator li:active{
            background-color: #ff9e7e;
            cursor:pointer;
        }
        #calculator li.tool:active{
            background-color: #4833ff;
            cursor:pointer;
        }
        #calcu-head {
            text-align:left;
            padding:10px 15px 5px;
        }
        span.imyeah {
            float:right;
            color:#ccc;
        }
        span.imyeah a{
            color:#ccc;
        }
        .screen{
            width:200px;
            height:24px;
            line-height:24px;
            padding:4px;
            border:#e6e6e6 1px solid;
            border-bottom:#f2f2f2 1px solid;
            border-right:#f2f2f2 1px solid;
            margin:10px auto;
            direction:ltr;
            text-align:right;
            font-size:16px;
            color:#999;
        }
        #calcu-foot{
            text-align:left;
            padding:10px 15px 5px;
            height:auto;
            overflow:hidden;
        }
        span#note{
            float:left;
            width:210px;
            height:auto;
            overflow:hidden;
            color:red;
        }
        span.welcome{
            clear:both;
            color:#999;
        }
        span.welcome a{
            float:right;
            color:#999;
        }
    </style>
    <script language="javascript">
        //此处插入上面的js代码

        var num=0,result=0,numshow="0";
        var operate=0; //判断输入状态的标志
        var calcul=0; //判断计算状态的标志
        var quit=0; //防止重复按键的标志
        function command(num){
            var str=String(document.calculator.numScreen.value); //获得当前显示数据
            str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
            str=str + String(num); //给当前值追加字符
            document.calculator.numScreen.value=str; //刷新显示
            operate=0; //重置输入状态
            quit=0; //重置防止重复按键的标志
        }
        function dzero(){
            var str=String(document.calculator.numScreen.value);
            str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
            document.calculator.numScreen.value=str;
            operate=0;
        }
        function dot(){
            var str=String(document.calculator.numScreen.value);
            str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
            for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
                if(str.substr(i,1)==".") return false; //如果有则不再插入
            }
            str=str + ".";
            document.calculator.numScreen.value=str;
            operate=0;
        }
        function del(){ //退格
            var str=String(document.calculator.numScreen.value);
            str=(str!="0") ? str : "";
            str=str.substr(0,str.length-1);
            str=(str!="") ? str : "0";
            document.calculator.numScreen.value=str;
        }
        function clearscreen(){ //清除数据
            num=0;
            result=0;
            numshow="0";
            document.calculator.numScreen.value="0";
        }
        function plus(){ //加法
            calculate(); //调用计算函数
            operate=1; //更改输入状态
            calcul=1; //更改计算状态为加
        }
        function minus(){ //减法
            calculate();
            operate=1;
            calcul=2;
        }
        function times(){ //乘法
            calculate();
            operate=1;
            calcul=3;
        }
        function divide(){ //除法
            calculate();
            operate=1;
            calcul=4;
        }
        function persent(){ //求余
            calculate();
            operate=1;
            calcul=5;
        }
        function equal(){
            calculate(); //等于
            operate=1;
            num=0;
            result=0;
            numshow="0";
        }
        //
        function calculate(){
            numshow=Number(document.calculator.numScreen.value);
            if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
                switch(calcul){ //判断要输入状态
                    case 1:result=num+numshow;break; //计算"+"
                    case 2:result=num-numshow;break; //计算"-"
                    case 3:result=num*numshow;break;
                    case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零！"; setTimeout(clearnote,4000)} break;
                    case 5:result=num%numshow;break;
                }
                quit=1; //避免重复按键
            }
            else{
                result=numshow;
            }
            numshow=String(result);
            document.calculator.numScreen.value=numshow;
            num=result; //存储当前值
        }
        function clearnote(){ //清空提示
            document.getElementById("note").innerHTML="";
        }
    </script>
</head>
<body>
<div id="calculator">
    <div id="calcu-head"><h6>简单的计算器</h6></div>
    <form name="calculator" action="" method="get">
        <div id="calcu-screen">
            <!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
            <input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
        </div>
        <div id="calcu-btn">
            <ul> <!--配置按钮-->
                <li onclick="command(7)">7</li>
                <li onclick="command(8)">8</li>
                <li onclick="command(9)">9</li>
                <li class="tool" onclick="del()">←</li>
                <li class="tool" onclick="clearscreen()">C</li>
                <li onclick="command(4)">4</li>
                <li onclick="command(5)">5</li>
                <li onclick="command(6)">6</li>
                <li class="tool" onclick="times()">×</li>
                <li class="tool" onclick="divide()">÷</li>
                <li onclick="command(1)">1</li>
                <li onclick="command(2)">2</li>
                <li onclick="command(3)">3</li>
                <li class="tool" onclick="plus()">+</li>
                <li class="tool" onclick="minus()">-</li>
                <li onclick="command(0)">0</li>
                <li onclick="dzero()">00</li>
                <li onclick="dot()">.</li>
                <li class="tool" onclick="persent()">%</li>
                <li class="tool" onclick="equal()">=</li>
            </ul>
        </div>
    </form>
</div>
</body>
</html>

</body>
</html>